<!-- 搜索页 -->
<template>
  <div class="searchbox">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="产品型号/产品名称"
        @search="onSearch"
        background="#1989fa"
      >
        <div slot="action" @click="onSearch" class="searchbtn">搜索</div>
      </van-search>
    </form>

    <div>
      <van-loading size="48px" vertical v-show="show">加载中......</van-loading>
      <div v-if="nodata" class="nodata">
        <p>暂无相关商品数据...</p>
      </div>
      <div v-else>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="50"
        >
          <van-grid :column-num="2" icon-size="3.1rem">
            <van-grid-item
              v-for="item in list"
              :key="item.id"
              :icon="item.goods_logo"
              :text="item.goods_title"
              :info="`￥${item.selling_price}`"
              @click="Details(item.id,item.goods_id)"
            />
          </van-grid>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 0,
      search: "", //
      total: 0, //总共的数据条数
      list: [], //展示的数组
      value: "",
      nodata: false,
      loading: false,
      finished: false,
      show: false
    };
  },
  methods: {
    onLoad() {
      console.log("下拉加载更多");
      this.page++;
      let page = this.page;
      let search = this.value;
      console.log(page, search);
      this.$http({
        method: "post",
        url: "home/search_goods/index",
        data: {
          search,
          page
        }
      }).then(res => {
        let rows = res.data.data;
        console.log(rows);
        if (rows.info === "暂无数据") {
          this.nodata = true;
        } else {
          this.loading = false;
          this.total = res.data.total;
          this.list = this.list.concat(rows);
          console.log(this.list);
          if (rows == null || rows.length < 30) {
            // 加载结束
            this.finished = true;
            return;
          }

          if (this.list.length >= this.total) {
            this.finished = true;
          }
        }
      });
    },
    onSearch() {
      this.nodata = false;
      this.list = [];
      this.page = 1;
      this.show = true;
      let search = this.value;
      let page = 1;
      this.$http({
        method: "post",
        url: "home/search_goods/index",
        data: {
          search,
          page
        }
      })
        .then(res => {
          console.log(res);
          this.show = false;
          let rows = res.data.data; //请求返回当页的列表
          console.log(rows);
          if (rows.info) {
            this.nodata = true;
          }
          this.loading = false;
          this.total = res.data.total;
          this.list = this.list.concat(rows);
          console.log(this.list);
          if (rows == null || rows.length < 30) {
            // 加载结束
            this.finished = true;
            return;
          }

          if (this.list.length >= this.total) {
            this.finished = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //跳转详情
    Details(id, pid) {
      console.log(id, pid);
      this.$router.push({
        name: "detail",
        query: {
          id: id,
          pid: pid
        }
      });
    }
  },
  created() {
    this.value = this.$route.query.value;
    console.log(this.$route.query.value);
  }
};
</script>
<style lang='scss' scoped>
.searchbox {
  width: 100vw;

  .van-grid {
    // margin-bottom: 1.3rem;
    margin-top: 1.4rem;
  }

  .showMsg {
    font-size: 24px;
    display: block;
    width: 100%;
    margin-top: 200px;
    text-align: center;
  }
}
.van-loading {
  display: block;
  width: 100%;
  height: 800px;
  text-align: center;
  padding-top: 300px;
}
.searchbtn {
  color: #fff;
}
.nodata {
  width: 100%;
  text-align: center;
  color: #ccc;
  letter-spacing: 0.1rem;
  font-size: 24px;
  line-height: 5rem;
}
.van-search {
  position: fixed;
  height: 50px;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>